{% block head %}
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{% endblock %}
{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">HOME</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><input type="submit" class="btn btn-primary" value="Add Customer"></li>
                </ul>
            </div>
        </div>
    </nav>
{% endblock %}
{% block content %}
    <div class="container-fluid bg-3 text-center">
        <form method="get" action="" class="form" role="form">
            {{ form.non_field_errors }}
            <div class="form-group">
                {{ form.as_p }}
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Search">
            </div>
            {% if query %}
                <h3>Results</h3>

                <div class="container-fluid bg-4 text-left">
                    <div class="row">

                        {% for result in page.object_list %}

                            <div class="col-sm-4">
                                <div class="thumbnail">

                                    <div class="form-group">
                                        <p>Email : {{ result.email }} </p>
                                    </div>
                                    <div class="form-group">
                                        <p>Username : {{ result.username }} </p>

                                    </div>
                                    <div class="form-group">
                                        <p>Institute: {{ result.institute }} </p>
                                    </div>
                                </div>
                            </div>
                        {% empty %}

                            <p style="text-center">No results found.</p>
                        {% endfor %}
                    </div>
                </div>

            {% endif %}
        </form>
    </div>
{% endblock %}
